<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="app"></div>
    <!-- react.js 提供React对象, 用于创建React虚拟DOM对象 -->
    <script src="/js/react.development.js"></script>
    <!-- react-dom.js提供了ReactDOM对象, 用于真实DOM转为虚拟DOM -->
    <script src="/js/react-dom.development.js"></script>
    <script>
      // 创建一个元素 --需要React对象 (来自react.js)
      let el = React.createElement(
        "button",
        { title: "按钮提示文字", className: "danger" },
        "提交"
      );
      //   console.log(el) 此处是一个react.element类型的"虚拟DOM对象" 不是真实DOM对象
      // 查找父元素 -- 需要ReactDOM对象 (来自react-dom.js)
      let root = document.getElementById("app"); //真实DOM
      root = ReactDOM.createRoot(root); //把真实的DOM元素转换为"虚拟DOM对象"
      // 在父元素上挂载子元素
      root.render(el); //在根元素上渲染子元素--都是"虚拟DOM元素"
      // React会把虚拟DOM树上的内容自动同步到真实DOM树上
    </script>
  </body>
</html>
